<template>
  <div class="dataEnter">
    <TreeMenu
      ref="treeMenuRef"
      :data="treeData"
      :show-filter="false"
      show-expand
      class="treeMenu"
      @node-click="handleNodeClick"
      :default-expanded-keys="expandeArr"
      :default-expanded-keys-highlight="highlight"
    ></TreeMenu>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { TreeMenu } from '@opentiny/vue'
import { IconRichTextTable } from '@opentiny/vue-icon'
import { useRouter } from 'vue-router'
import { setMenuSelected, cancelMenuSelected } from 'untils'
const router = useRouter()
const treeMenuRef = ref()
const expandeArr = ref([ 300, 301, 302, 303, 400, 401, 402, 403 ])
const highlight = ref(301)
const treeData = ref([
  {
    id: 300,
    label: '面料',
    customIcon: IconRichTextTable(),
    children: [
      {
        id: 301,
        label: '入库'
      },
      {
        id: 302,
        label: '出库'
      },
      {
        id: 303,
        label: '库存'
      }
    ]
  },
  {
    id: 400,
    label: '辅料',
    customIcon: IconRichTextTable(),
    children: [
      {
        id: 401,
        label: '入库'
      },
      {
        id: 402,
        label: '出库'
      },
      {
        id: 403,
        label: '库存'
      }
    ]
  }
])
const pathObj = {
  301: '/order/erp/fabricStore',
  302: '/order/erp/fabricOutbound',
  303: '/order/erp/fabricInventory',
  401: '/order/erp/auxiliaryStore',
  402: '/order/erp/auxiliaryOutbound',
  403: '/order/erp/auxiliaryInventory'
}
const handleNodeClick = ({ id }) => {
  setTimeout(() => {
    const path = pathObj[id]
    if (path) {
      router.push({ path })
    }
  },0)
}
onMounted(() => {
  // 设置默认显示的菜单
  const pathArr = Object.entries(pathObj)
  pathArr.forEach(item => {
    if (window.location.hash.includes(item[1])) {
      const key = Number(item[0])
      treeMenuRef.value.setCurrentKey(key)
      highlight.value = key
    }
  })
  setMenuSelected(0)
})
onBeforeUnmount(() => {
  cancelMenuSelected(0)
})
</script>

<style lang="scss" scoped>
.dataEnter {
  height: calc(100vh - 48px);
  display: flex;
  overflow: hidden;
  background-color: white;

  .treeMenu {
    height: 100%;
    :deep(.tiny-tree) {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 40%;
    }
    :deep(.tiny-tree .tiny-tree-node.is-current>.tiny-tree-node__content) {
      background-color: #5e7ce0
    }
    :deep(.tiny-tree-node.is-current:not(.show-checkbox)>.tiny-tree-node__content .tiny-tree-node__content-box, .tiny-tree-node.is-current:not(.show-checkbox)>.tiny-tree-node__content .tiny-tree-node__content-righ) {
      background-color: #5e7ce0;
      .tree-node-name {
        color: white;
      }
    }
  }
  .content{
    margin: 0 0 0 2px;
    max-width: calc(100% - 42px);
    min-width: calc(100% - 280px);
    height: 100%;
  }
}
:deep(tr.tiny-grid-body__row.row__new.unSave_color) {
  background-color: #9ba8d5;
}
</style>